<template>
  <div class="pieCard">
    <div class="peiImg"><img src="../image/bg_circular.png" /></div>
    <div :id="`pie-${id}`" style="width:100%;height: 200px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        background: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          orient: "vertical", // 设置为垂直方向显示
          right: 10, // 距离容器右侧的距离
          top: "middle", // 垂直居中
          itemWidth: 20, // 图例项的宽度
          itemHeight: 15, // 图例项的高度
          itemGap: 10, // 图例项之间的间隔
          textStyle: {
            color: "#cbcbcb",
          },
          formatter: (name) => {
            let data = this.option.series[0].data; // 获取对应系列的数据
            let total = 0; // 总和
            for (let i = 0; i < data.length; i++) {
              total += data[i].value; // 累加数值
            }
            let targetData = data.find(function(item) {
              return item.name === name;
            }); // 找到对应图例项的数据
            let percent = ((targetData.value / total) * 100).toFixed(0); // 计算占比，保留两位小数
            return name + "    " + percent + "%"; // 返回图例显示文本
          },
        },
        series: [
          {
            type: "pie",
            label: {
              show: false,
            },
            radius: ["70%", "85%"],
            data: this.optData,
            center: ["30%", "50%"], // 设置饼状图的中心位置为左侧
            itemStyle: {
              normal: {
                borderWidth: 5, // 设置每个扇形之间的间隙大小为 10px
                borderColor: "#0E2043",
              },
            },
          },
          {
            type: "pie",
            radius: ["55%", "70%"],
            data: this.optData,
            center: ["30%", "50%"], // 设置饼状图的中心位置为左侧
            silent: true,
            itemStyle: {
              borderWidth: 5, // 设置每个扇形之间的间隙大小为 10px
              borderColor: "#0D1B35",
              opacity: 0.4, // 设置内圆环透明度为0.5
            },
            label: {
              show: false,
            },
          },
        ],
      },
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    optData: {
      type: Array,
      required: true,
    },
    height: {
      type: Number,
      require: true,
    },
  },
  methods: {
    fnDrawPie() {
      let charts001 = this.$echarts.init(
        document.getElementById(`pie-${this.id}`)
      );
      charts001.setOption(this.option);
    },
  },
  mounted() {
    this.fnDrawPie();
  },
  watch: {
    optData(newVal, oldVal) {
      if (newVal) {
        this.option.data = newVal;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.pieCard {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  .title {
    display: flex;
    align-items: center;
    padding: 20px;
    padding: 20px;
    font-size: 16px;
    font-weight: 650;

    .topline {
      width: 5px;
      height: 16px;
      margin-right: 10px;
      background-color: #2b8dc8;
    }
  }

  .peiImg {
    position: absolute;
    top: 25px;
    height: 190px;
    width: 196px;
    left: 75px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
